<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			#div1{width: 500px;height: 260px;}
			#myul{list-style-type: none;margin: 0;padding: 0;float: left;}
			#myul li{width: 100px;height: 50px;border: 1px solid #000;text-align: center;line-height: 50px;}
			#div1 div{width: 398px;height: 260px;background: #ccc;float: right;
			      font-size: 3em;text-align: center;line-height: 260px;display: none;}
					</style>
	</head>
	<body>
		<div id="div1">
			<ul id="myul">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>	
			</ul>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
		<script type="text/javascript">
		    var Div1 = document.getElementById('div1');
		    var Li = Div1.getElementsByTagName('li');
			var Div2 = Div1.getElementsByTagName('div');
//			alert(Div2.length);
			for(var i=0;i<Li.length;i++){
				Li[i].index = i;
//				Div[i].index = j;
				Li[i].onmouseover = function(){
					
					for(var i=0;i<Li.length;i++){
						
						Li[i].style.background = 'none';
						Div2[i].style.display = 'none';
					}
					
					this.style.background = '#ccc';
					Div2[this.index].style.display = 'block';
				}
				Li[i].onmouseout = function(){
					for(var i=0;i<Li.length;i++){	
					}
					this.style.background = 'none';
					Div2[this.index].style.display = 'none';
				}
			}
			for(var i=0;i<Li.length;i++){
				Div2[i].index = i;
				Div2[i].onmouseover = function(){
					for(var i=0;i<Li.length;i++){
						Li[i].style.background = 'none';
						Div2[i].style.display = 'none';
					}
					
					this.style.display = 'block';
					Li[this.index].style.background = '#ccc';
				}
				Div2[i].onmouseout = function(){
					for(var i=0;i<Li.length;i++){	
					}
					this.style.display = 'none';
					Li[this.index].style.background = 'none';
				}
			}
		</script>
	</body>
</html>
